<template>
    <oa-page title="全部应用" :enable-back="true">
        <hl-card-cell :title="item.Name" :key="`hl-card-${item.Name}`" :icon="item.Icon" v-for="item in menus">
            <oa-list-item :key="`oa-list-${sub_item.Name}`" v-for="sub_item in item.Childern" @click="goLink(sub_item)"
                          :title="sub_item.Name"/>
        </hl-card-cell>

    </oa-page>
</template>

<script>
    import OaTabPage from "../components/oa-tab-page";
    import OaPage from "../components/oa-page";
    import HlCardCell from "../components/hl-card-cell";
    import OaListItem from "../components/oa-list-item";
    import {getConfig, getTokenInfo} from "../config";

    export default {
        components: {
            OaListItem,
            HlCardCell,
            OaPage,
            OaTabPage
        },
        name: "menus",
        data() {
            return {
                menus: [],
                inAppBrowserRef: null
            }
        },
        mounted() {
            this.loadMenus()
        }
        ,
        methods: {
            goLink(item) {
                this.openRemoteUrl(item.Url)
            },
            openRemoteUrl(url) {
                try {
                    let config = getConfig();
                    let tokenInfo = getTokenInfo();
                    let inAppBrowserRef = cordova.InAppBrowser.open(config.rootUrl + '/Token/Goto?tokenId=' + tokenInfo.token.TokenId + '&url=' + encodeURIComponent(url), '_blank', 'location=no,toolbar=no');
                    inAppBrowserRef.addEventListener('loadstart', this.loadstart);
                    inAppBrowserRef.addEventListener('loadstop', this.browserLoadstop);
                    inAppBrowserRef.addEventListener('loaderror', this.OnAppError);
                    inAppBrowserRef.addEventListener('exit', this.inAppEvent);
                    this.inAppBrowserRef = inAppBrowserRef;
                } catch (e) {
                    console.log(e)
                }

            },
            loadstart(event) {
                let url = event.url;
                if (url.indexOf(`/WorkFlowRuntime/Attachment/download?`) > -1) {
                    window.nativeLink.openUrl(url)
                }
            },
            browserLoadstop(event) {
                if (event.url.indexOf('dcqtech_app_close_page.html') > 0) {
                    this.inAppBrowserRef.close();
                }
            },
            OnAppError(event) {

            },
            inAppEvent(event) {

            },
            loadMenus() {

                let config = getConfig()
                let tokenInfo = getTokenInfo()
                let url = config.rootUrl + "/app/fullmenu?userid=" + tokenInfo.userInfo.ID
                this.$get(url).then((res) => {
                    this.menus = res
                }).catch((error) => {
                    console.log(error)
                })
            }
        }
    }
</script>

<style scoped lang="less">
    .gird-content {
        display: flex;
        flex-direction: row;
        padding-top: 16px;
        margin-top: 12px;
        flex-wrap: wrap;
        .gird-item {
            width: 25%;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            &:active {
                background: darken(#fff, 5%);
            }
            .grid-icon {
                font-size: 36px;
            }
            .gird-label {
                text-align: center;
                margin-top: 8px;
                font-size: 12px;
                font-weight: 500;
                color: #2c2c2c;
            }
        }

    }
</style>